<template>
    <div>
        <div class="layout">
            <div class="logo">
                <img
                src="@/assets/imgs/login/logo.png"
                alt="" />
            </div>
        </div>
        <div class="main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" label-position="left">
            <div class="Mtop">
<span class="Mtops isMtops">填写企业信息</span>
<span class="Mtops">提交审核</span>
<span class="Mtops">审核结果通知</span>
            </div>
            <div class="Mtitle">主体信息</div>
            <div class="Mname"><span class="Myuan"></span>企业信息</div>
            <el-form-item label="企业名称" prop="name1"  style="margin-top:30px;margin-left:28px;">
    <el-input v-model="ruleForm.name1" style="width:460px" placeholder="请输入营业执照上的全称"></el-input>
  </el-form-item>
  <el-form-item label="统一社会信用码" prop="name2" style="margin-top:30px;margin-left:28px;">
    <el-input v-model="ruleForm.name2" style="width:460px" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="统一社会信用证有效期" prop="licenseDate" style="margin-top:30px;margin-left:28px;">
    <el-date-picker
                      style="width: 220px; margin-right: 20px"
                      v-model="ruleForm.licenseDate"
                      type="daterange"
                      key="licenseDate"
                      value-format="yyyy-MM-dd"
                      unlink-panels
                      :clearable="false"
                      :disabled="ruleForm.licenseIsLong"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @input="changeDate"
                    >
                    </el-date-picker>
                    <el-checkbox
                      v-model="ruleForm.licenseIsLong"
                      :disabled="!ruleForm.licenseDate"
                      @change="(val) => longDateChange(val, 'licenseDate')"
                      >长期有效</el-checkbox
                    >
  </el-form-item>
  <el-form-item label="三证合一照片" prop="name3" style="margin-top:30px;margin-left:28px;">
    <el-upload
  action="/merchantApi/api/corpmember/account/oss/upload"
  accept=".png,.jpg,.jpeg"
  :limit="1"
  :on-remove="handleRemove1"
  :before-upload="beforeUpload"
  :on-success="handleSuccess1"
  :file-list="ruleForm.name3">
  <el-button  style="background: #F0F0F0;color:#000;border: 1px solid #E5E5E5;" class="width120">上传照片</el-button>
  <div slot="tip" style="font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #999999;">上传附件，照片最大不得超过2M</div>
</el-upload>
  </el-form-item>
  <el-form-item label="所在地区" class="is-required"  style="margin-top:30px;margin-left:28px;">
  <el-form-item  prop="name4">
    <el-select v-model="ruleForm.name4" placeholder="省" @change="handleProv">
        <el-option
                                  v-for="item of provList"
                                  :key="item.provinceCode"
                                  :label="item.provinceName"
                                  :value="item.provinceCode"
                                ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item prop="name5" style="position: absolute;left:245px;top:0px">
    <el-select v-model="ruleForm.name5" placeholder="区" @change="handleCity">
        <el-option
                                  v-for="item of cityList"
                                  :key="item.cityCode"
                                  :label="item.cityName"
                                  :value="item.cityCode"
                                ></el-option>
    </el-select>
  </el-form-item>
  </el-form-item>
  <el-form-item label="经营范围" class="is-required" style="margin-top:15px;margin-left:28px;">
  <el-form-item prop="name6">
    <el-select v-model="ruleForm.name6" placeholder="请选择" style="margin-right:30px;" @change="handleCategoryOne">
        <el-option
                              v-for="(item, index) in categoryList1"
                              :key="index"
                              :label="item.oneLevelName"
                              :value="item.oneLevelName"
                            ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item prop="name7" style="position: absolute;left:245px;top:0px">
    <el-select v-model="ruleForm.name7" placeholder="请选择"  @change="handleCategoryTwo">
        <el-option
                              v-for="(item, index) in categoryList2"
                              :key="index"
                              :label="item.twoLevelName"
                              :value="item.twoLevelName"
                            ></el-option>
    </el-select>
  </el-form-item>
  </el-form-item>
  <el-form-item label="企业地址" prop="name8" style="margin-top:15px;margin-left:28px;">
    <el-input v-model="ruleForm.name8" style="width:460px" placeholder="请输入"></el-input>
  </el-form-item>
  <div class="Mline"></div>
            <div class="Mname"><span class="Myuan"></span>法人信息</div>
            <el-form-item label="法人姓名" prop="name9" style="margin-top:30px;margin-left:28px;">
    <el-input v-model="ruleForm.name9" style="width:460px" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="法人手机号" prop="name10" style="margin-top:30px;margin-left:28px;">
    <el-input v-model="ruleForm.name10" style="width:460px" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="法人身份证号码" prop="name11" style="margin-top:30px;margin-left:28px;">
    <el-input v-model="ruleForm.name11" style="width:460px" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="身份证有效期" prop="legalCertIdTime" style="margin-top:30px;margin-left:28px;">
    <el-date-picker
                      style="width: 220px; margin-right: 20px"
                      v-model="ruleForm.legalCertIdTime"
                      type="daterange"
                      key="legalCertIdTime"
                      value-format="yyyy-MM-dd"
                      unlink-panels
                      :clearable="false"
                      :disabled="ruleForm.legalCertIdLong"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @input="changeDate"
                    >
                    </el-date-picker>
                    <el-checkbox
                      v-model="ruleForm.legalCertIdLong"
                      :disabled="!ruleForm.legalCertIdTime"
                      @change="(val) => longDateChange(val, 'legalCertIdTime')"
                      >长期有效</el-checkbox
                    >
  </el-form-item>
  <el-form-item label="身份证正面照" prop="name12" style="margin-top:30px;margin-left:28px;">
    <el-upload
  action="/merchantApi/api/corpmember/account/oss/upload"
  accept=".png,.jpg,.jpeg"
  :limit="1"
  :on-remove="handleRemove2"
  :before-upload="beforeUpload"
  :on-success="handleSuccess2"
  :file-list="ruleForm.name12">
  <el-button  style="background: #F0F0F0;color:#000;border: 1px solid #E5E5E5;" class="width120">上传照片</el-button>
  <div slot="tip" style="font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #999999;">上传附件，照片最大不得超过2M</div>
</el-upload>
  </el-form-item>
  <el-form-item label="身份证反面照" prop="name13" style="margin-top:30px;margin-left:28px;">
    <el-upload
  action="/merchantApi/api/corpmember/account/oss/upload"
  accept=".png,.jpg,.jpeg"
  :limit="1"
  :on-remove="handleRemove3"
  :before-upload="beforeUpload"
  :on-success="handleSuccess3"
  :file-list="ruleForm.name13">
  <el-button  style="background: #F0F0F0;color:#000;border: 1px solid #E5E5E5;" class="width120">上传照片</el-button>
  <div slot="tip" style="font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #999999;">上传附件，照片最大不得超过2M</div>
</el-upload>
  </el-form-item>
            <div class="Mtitle">结算信息</div>
            <el-form-item label="银行账户类型" prop="name14" style="margin-top:30px;margin-left:28px;">
                <el-radio-group v-model="ruleForm.name14">
      <el-radio label="1">对公</el-radio>
      <el-radio label="2">对私</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="开户银行" prop="name15" style="margin-top:30px;margin-left:28px;">
    <el-select v-model="ruleForm.name15" placeholder="请选择">
        <el-option
                                  v-for="item of bankList"
                                  :key="item.bankCode"
                                  :label="item.bankName"
                                  :value="item.bankCode"
                                ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="开户地区" class="is-required" style="margin-top:30px;margin-left:28px;">
    <el-form-item  prop="name16">
    <el-select v-model="ruleForm.name16" placeholder="省"   @change="handleProv1">
                               <el-option
                                  v-for="item of provList1"
                                  :key="item.provinceCode"
                                  :label="item.provinceName"
                                  :value="item.provinceCode"
                                ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item prop="name17" style="position: absolute;left:245px;top:0px">
    <el-select v-model="ruleForm.name17" placeholder="市"  @change="handleCity1">
        <el-option
                                  v-for="item of cityList1"
                                  :key="item.cityCode"
                                  :label="item.cityName"
                                  :value="item.cityCode"
                                ></el-option>
    </el-select>
  </el-form-item>
  </el-form-item>
            <div class="Mline"></div>
            <div class="Mbtn">
                <el-button class="width120" style="margin-right:10px;" @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" class="width120" @click="submitForm('ruleForm')">提交</el-button>
            </div>
        </el-form>
        </div>
        <div class="footer">
            <span>联系我们 400-888-2206</span>
            <span style="margin-left:30px;">电⼦邮箱 yun@yuncnpay.com</span>
            <span style="margin-left:30px;">© 陕⻄云尘付技术有限公司 陕ICP备 19015081号 - 3</span>
        </div>
        <el-dialog
  :visible.sync="dialogVisible"
  :show-close=false
  :close-on-click-modal=false
  :center="true"
  width="0px"
>
<div style="width:378px;height:464px;background: #fff; position:absolute;border-radius:14px;left:-190px;top:0px">
    <img src="@/assets/imgs/login/submit.png" alt="" style="width:378px;height:261px">
<div style="width:100%;text-align: center;">
<div style="font-size: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #03BFC6;position: relative;top:-40px
">资料已提交</div>
<div style="font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;position: relative;top:-30px;
color: #000000;">审核结果云尘付会异步通知您所属的主商户</div>
    <el-button type="primary" @click="dialogVisible = false" style="width: 207px;margin-top:50px;
height: 48px;
background: #03BFC6;
border-radius: 24px;">我知道了</el-button>
</div>
</div>

</el-dialog>
    </div>
  </template>
  
  <script>
  import { getUserInfo } from "@/utils/public";
  
  export default {
    name: "qiyeUserCreate",
    data() {
      return {
        dialogVisible:false,
        ruleForm:{
            name1:'',
            name2:'',
            name4:'',
            name5:'',
            name6:'',
            name7:'',
            name8:'',
            name9:'',
            name10:'',
            name11:'',
            name12:[],
            name13:[],
            name3:[],
            name14:'1',
            name15:'',
            name16:'',
            name17:'',
            legalCertIdTime:'',
            licenseDate:'',
        },
        bankList:[],//银行列表
      provList1: [], // 省
      cityList1: [], // 市
      provList: [], // 省
      cityList: [], // 市
      categoryList1: [], //行业类型
      categoryList2: [], //行业类型
      categoryList3: [], //行业类型
      rules: {
        name1: [{ required: true, message: "请输入", trigger: "change" }],
        name2: [{ required: true, message: "请输入", trigger: "change" }],
        name4: [{ required: true, message: "请选择", trigger: "change" }],
        name5: [{ required: true, message: "请选择", trigger: "change" }],
        name6: [{ required: true, message: "请选择", trigger: "change" }],
        name7: [{ required: true, message: "请选择", trigger: "change" }],
        name8: [{ required: true, message: "请输入", trigger: "change" }],
        name9: [{ required: true, message: "请输入", trigger: "change" }],
        name10: [{ required: true, message: "请输入", trigger: "change" }],
        name11: [{ required: true, message: "请输入", trigger: "change" }],
        legalCertIdTime: [{ required: true, message: "请选择", trigger: "change" }],
        licenseDate: [{ required: true, message: "请选择", trigger: "change" }],
        name12: [
          { required: true, message: "请上传", trigger: "change" },
        ],
        name13: [
          { required: true, message: "请上传", trigger: "change" },
        ],
        name3: [
          { required: true, message: "请上传", trigger: "change" },
        ],
        name14: [{ required: true, message: "请选择", trigger: "change" }],
        name15: [{ required: true, message: "请选择", trigger: "change" }],
        name16: [{ required: true, message: "请选择", trigger: "change" }],
        name17: [{ required: true, message: "请选择", trigger: "change" }],
      },
      };
    },
    components: {
    },
    computed: {
    },
    created() {
   //省
   this.$http
      .get("/api/corpmember/account/select/ada/province")
      .then((res) => {
        if (res.code === "0000") {
          this.provList1 = res.data;
          this.provList = res.data;
        }
      });
       //银行列表
    this.$http.get("/api/corpmember/account/select/ada/bank?bankName=").then((res) => {
                    this.bankList = res.data;
                })
        // 行业类型
        this.$http
      .get("/api/corpmember/account/select/ada/mcc?level=1")
      .then((res) => {
        if (res.code === "0000") {
          this.categoryList1 = res.data;
        }
      });
    },
    methods: {
      getUserInfo,
      beforeUpload(file) {
        const is2M = file.size / 1024 / 1024 < 2;
        const type = ["image/jpg", "image/png", "image/jpeg"].includes(file.type);
  
        if (!type) {
          this.$message.warning("上传图片只支持jpg、png格式");
          return false;
        }
        if (!is2M) {
          this.$message.warning("上传图片大小不能超过2M");
          return false;
        }
        return true;
      },
      handleRemove1() {
      this.ruleForm.name3= [];
    },
    handleSuccess1(res) {
      if (res.code === "0000") {
        this.ruleForm.name3 = [];
        this.ruleForm.name3 = res.data.id;
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate(['name3']);
        });
      } else {
        this.ruleForm.name3 = [];
        this.$message.error("上传失败，请稍后再试！");
      }
    },
    handleRemove2() {
      this.ruleForm.name12= [];
    },
    handleSuccess2(res) {
      if (res.code === "0000") {
        this.ruleForm.name12 = [];
        this.ruleForm.name12 = res.data.id;
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate(['name12']);
        });
      } else {
        this.ruleForm.name12 = [];
        this.$message.error("上传失败，请稍后再试！");
      }
    },
    handleRemove3() {
      this.ruleForm.name13= [];
    },
    handleSuccess3(res) {
      if (res.code === "0000") {
        this.ruleForm.name13 = [];
        this.ruleForm.name13 = res.data.id;
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate(['name13']);
        });
      } else {
        this.ruleForm.name13 = [];
        this.$message.error("上传失败，请稍后再试！");
      }
    },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogVisible=true
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      longDateChange(val, prop) {
        this[`${prop}End`] = this.ruleForm[prop][1];
      if (val) {
        this.$set(this.ruleForm, prop, [
          this.ruleForm[prop][0],
          "2099-12-31",
        ]);
      } else {
        this.$set(this.ruleForm, prop, [
          this.ruleForm[prop][0],
          this[`${prop}End`],
        ]);
      }
      },
      //一级经营范围
      handleCategoryOne(val) {
      this.$set(this.ruleForm, "name7", "");
      this.getCategoryList(val,"categoryList2", 2);
    },
        //二级行业
        handleCategoryTwo(val) {
      this.$set(this.ruleForm, "name7", val);
    },
            //获取行业列表
            getCategoryList(val,prop,num) {
      this.$http
        .get(
          `/api/corpmember/account/select/ada/mcc?level=${num}&oneLevelName=${val}&twoLevelName=''`
        )
        .then((res) => {
          if (res.code === "0000") {
            this[prop] = res.data.map((item) => item);
          }
        });
    },
              //银行 省
              handleProv1(val) {
      this.$set(this.ruleForm, "name17", "");
      setTimeout(() => {
        this.$refs.ruleForm.clearValidate(["name17"]);
      }, 0);
      this.getCityList1(val, "cityList1");
    },
    //银行 市
    handleCity1(val) {
      this.$set(this.ruleForm, this.ruleForm.name17, val);
    },
        //银行 获取市
        getCityList1(val, prop) {
      this.$http
        .get(`/api/corpmember/account/select/ada/city?parentCode=${val}`)
        .then((res) => {
          if (res.code === "0000") {
            this[prop] = res.data.map((item) => item);
          }
        });
    },
         // 省
    handleProv(val) {
      this.$set(this.ruleForm, "name5", "");
      setTimeout(() => {
        this.$refs.ruleForm.clearValidate(["name5"]);
      }, 0);
      this.getCityList1(val, "cityList");
    },
    // 市
    handleCity(val) {
        this.$set(this.ruleForm, this.ruleForm.name5, val);
    },
    },
    watch: {
  
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .layout {
    width: 100%;
    height:50px;
    background: rgb(255, 255, 255);
box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
    .logo {
     top: 11px;
        position: relative;
        left: 448px;
        width: 90px;
        height: 30px;
      img {
        width: 100%;
height: 100%;
      }
    }
  }
  .main{
    padding: 57px 20px;
    margin: 0 auto;
    margin-top: 1px;
    width: 1024px;
background: #FFFFFF;
.Mtop{
    margin: 0 auto;
    width: 672px;
height: 34px;
line-height: 34px;
background: #F6F6F6;
font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #000000;
display: flex;
justify-content: space-around;
.Mtops{
    width: 100%;
    text-align: center;
    border-radius: 0px 200px 200px 0px;
}
.isMtops{
    color:#FFFFFF;background: #03BFC6;
}
}
.Mtitle{
    padding-left: 13px;
    margin-top: 50px;
    width: 100%;
height: 42px;
line-height: 42px;
background: #F7F7F7;
border: 1px solid #E0E0E0;
font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #999999;
}
.Mname{
    margin-top: 24px;
height: 22px;
font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 22px;
.Myuan{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #03BFC6;
    margin-right: 20px;
    position: relative;
    top: -1px;
}
}
.Mline{
    margin-top: 40px;
    width: 100%;
    height: 1px;
border-top: 1px solid #F5F5F5;
}
.Mbtn{
    width: 100%;
    text-align: center;
    margin-top: 50px;
}
  }
  .footer{
    margin-top: 23px;
    line-height: 62px;
    font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #999999;
    text-align: center;
    width: 100%;
    height: 62px;
background: #3C3C3C;
  }

  </style>
  